<head>
    <script src="../build/index.js"></script>
    <script src="../build/plugin.webgl.js"></script>
    <script src="../build/plugin.webgl.3ds.js"></script>
</head>

<style>
    canvas {
        border: 1px solid grey;
        background-color: #4caf50;
        /*opacity: 0.05;*/
    }
</style>

<body>
    <canvas id="app" width="600" height="600"></canvas>

    <script>
        var $app = new Easycanvas.Painter();
        $app.register(document.getElementById('app'), {
            webgl: true,
        });
        $app.start();

        var texture2img = {
            // 各种图片加载方式
            'Flower Center': Easycanvas.ImgLoader('../resource/15sunflower/center.jpg'),
            'Petals': Easycanvas.ImgLoader('../resource/15sunflower/petal.jpg'),
            'Material #45': '../resource/game_char/4.jpg',
            'Material #46': '../resource/game_char/3.jpg',
            'Material #49': $app.ImgLoader('../resource/game_char/6.jpg'),
            'Material #51': $app.ImgLoader('../resource/game_char/8.jpg'),
        };

        // var sunFlower = 'https://raw.githubusercontent.com/c-zhuo/easycanvas/develop/0.5.4-mmd/demos/resource/15sunflower/15sunflower.3DS';
        var sunFlower = '../resource/15sunflower/15sunflower.3DS';

        window.Easycanvas.loader3DS(sunFlower, function (data) {
            var ry = Easycanvas.Transition.pendulum(0, 360, 5000).loop();

            var flower = $app.add({
                name: 'flower',
                style: {
                    left: 300, top: 300,
                },
            });

            data.forEach(function (model) {
                flower.add({
                    webgl: window.Easycanvas.webglShapes.custom({
                        vertices: model.vertices,
                        indices: model.indices,
                        img: texture2img[model.img],
                        textures: model.textures,
                        ry: ry,
                        scaleX: 0.5, scaleY: 0.5, scaleZ: 0.5,
                        // colors: !textures.length ? colors : undefined,
                        colors2: [
                            Math.random() * 255,
                            Math.random() * 255,
                            Math.random() * 255,
                            // Math.random() * 255,
                        ],
                    })
                });
            });
        });

        window.Easycanvas.loader3DS('../resource/game_char/sunnvfashi.3DS', function (data) {

            var woman = $app.add({
                name: 'woman',
                style: {
                    left: 200,
                    top: 350,
                },
                webgl: {
                    rx: 90, ry: 0, rz: Easycanvas.Transition.linear(0, 360, 5000).loop(),
                    scaleX: 50, scaleY: 50, scaleZ: 50,
                },
            });

            data.forEach(function (model) {
                woman.add({
                    name: model.img,
                    webgl: window.Easycanvas.webglShapes.custom({
                        vertices: model.vertices,
                        indices: model.indices,
                        img: texture2img[model.img],
                        textures: model.textures,
                        colors2: [
                            Math.random() * 255,
                            Math.random() * 255,
                            Math.random() * 255,
                            // Math.random() * 255,
                        ],
                    })
                });
            });
        });
    </script>
</body>

